<template>
	<view class="wp">
		<view class="serch">
			<button type="default" @click="openScreen">筛选</button>
		</view>
		<view class="total">待提货：{{num}}</view>
		<view class="list" v-for="(item,index) in list">
			<view class="date">下单日期：{{item.title}}</view>
			<view class="item" v-for="(ite,idx) in item.list">
				<view class="flex_between">
					<view class="name">自提点：{{ite.title}}</view>
					<view class="name">数量：{{ite.list.length}}</view>
				</view>
				<view class="log_open" v-if="!ite.show" @click="openLog(1,index,idx)">展开商品信息 <image src="/static/jiantou1.png"></image></view>
				<view v-show="ite.show">
					<view class="container" v-for="it in ite.list">
						<view class="info">
							<view class="content">
								<view class="goods" v-for="i in it.goods">
									<image :src="i.thumb"></image>
									<view class="goodsInfo">
										<view class="g_tit clamp2">{{i.goodstitle}}</view>
										<view class="g_num">数量：X{{i.total}}</view>
									</view>
								</view>
								<view class="address">订单编号: {{it.ordersn}}</view>
								<view class="address">下单时间: {{it.paytime}}</view>
							</view>
							<view class="price">￥{{it.price}}</view>
						</view>
					</view>
				</view>
				<view class="log_open log_close" v-if="ite.show" @click="openLog(0,index,idx)">收起 <image src="/static/jiantou1.png"></image></view>
			</view>
		</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<scroll-view class="scroll_screen" :scroll-y="true">
				<uni-forms :modelValue="formData" label-width="120px" label-position="top">
					<uni-forms-item label="状态">
						<uni-data-select v-model="formData.status" :localdata="range" :clear="false"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="自提点">
						<uni-data-select v-model="formData.pids" :localdata="pickuplist" :clear="false"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="开始时间">
						<view class="data_time" @click="openPicker('btime')">
							<text v-if="formData.btime">{{formData.btime}}</text>
							<text v-else>选择日期</text>
						</view>
					</uni-forms-item>
					<uni-forms-item label="结束时间">
						<view class="data_time" @click="openPicker('etime')">
							<text v-if="formData.etime">{{formData.etime}}</text>
							<text v-else>选择日期</text>
						</view>
					</uni-forms-item>
					<view class="screen_submit">
						<button @click="screenSubmit">确定筛选</button>
					</view>
					<view class="block"></view>
				</uni-forms>
			</scroll-view>
		</uni-drawer>
		<simple-datetime-picker ref="myPicker" :startYear="2023" :isd="true" :endYear="endYear"
			@submit="handleSubmit"></simple-datetime-picker>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" mode=""></image>
			<text v-if="isempty">到底了~</text>
		</view>
		<view class="totalBtn" @click="exportorder">订单导出</view>
	</view>
</template>

<script>
	export default {
		data() {
			let date = new Date(),
				year = date.getFullYear();
			return {
				list:[],
				page: 0,
				isloading: false,
				isempty: false,
				endYear: year,
				setDataTime: '',
				formData: {
					status: 0,
					btime: '',
					etime: '',
					pids: '',
				},
				pickuplist: [{
					value: '',
					text: "全部"
				}],
				range: [
				    { value: 0, text: "全部" },
				    { value: 1, text: "未提货" },
				    { value: 3, text: "已提货" },
				],
				num: 0,
			};
		},
		onLoad() {
			this.getmainList();
			this.getpickupList();//自提点列表
			this.getNumMain();//待提货数量
		},
		onReachBottom() {
			this.getmainList();
		},
		methods: {
			exportorder(){
				// this.$axios('market/exportorder','POST','supplier',this.formData).then(res=>{
				// 	if(res.data.code == 200){
						// uni.downloadFile({
						// 	url: res.data.data.path,
						// 	success: ress => {
						// 		const file = wx.getFileSystemManager();
						// 		file.saveFile({
						// 			tempFilePath: ress.tempFilePath,
						// 			success: (res) => {
						// 				console.log(res)	
						// 			},
						// 		})
						// 	},
						// 	fail: err => {
						// 		this.$api.msg('保存失败');
						// 	}
						// });
				// 	}
				// })
			},
			openLog(type,index,idx){
				this.$set(this.list[index].list[idx], 'show', type);
			},
			getmainList(){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				let obj = {
					...this.formData,
					...{
						page: this.page
					}
				}
				this.$axios('market/orderList','POST','supplier',obj).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.list = [...this.list,...res.data.data.list];
						this.isempty = res.data.data.list == null || res.data.data.list.length <= 0;
					}
				})
			},
			getNumMain(){
				this.$axios('market/ordermain','POST','supplier').then(res=>{
					if(res.data.code == 200){
						this.num = res.data.data.paynum;
					}
				})
			},
			getpickupList(){
				this.$axios('market/pickuplist','POST','supplier').then(res=>{
					if(res.data.code == 200){
						let obj = res.data.data.list.map(v => ({
							value: v.id,
							text: v.title
						}))
						this.pickuplist = [...this.pickuplist, ...obj];
					}
				})
			},
			openScreen() {
				this.$refs.showRight.open();
			},
			openPicker(v) {
				this.setDataTime = v;
				this.$refs.myPicker.show();
			},
			screenSubmit() {
				this.$refs.showRight.close();
				console.log(this.formData);
				this.page = 0;
				this.list = [];
				this.getmainList();
			},
			handleSubmit(e) {
				if (!this.setDataTime) return;
				this.formData[this.setDataTime] = `${e.year}-${e.month}-${e.day}`;
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #f8f8fe;
	padding-bottom: 140rpx;
}
.wp{
	padding: 20rpx;
}
.serch{
	button{
		font-size: 28rpx;
	}
}
.total{
	text-align: right;
    color: #666;
    margin-top: 20rpx;
	font-size: 22rpx;
}
.log_open{
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10rpx;
	color: #666;
	image{
		width: 24rpx;
		height: 24rpx;
		transform: rotateZ(90deg);
		margin-left: 10rpx;
	}
}
.log_close{
	image{
		transform: rotateZ(270deg);
	}
}
.list{
	.date{
		font-weight: bold;
		margin-top: 20rpx;
	}
	.item{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		.name{
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.content{
				width: 78%;
				.goods{
					display: flex;
					align-items: center;
					margin-bottom: 6rpx;
					image{
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
					}
					.goodsInfo{
						flex: 1;
						font-size: 24rpx;
						.g_num{
							font-size: 22rpx;
						    color: #999;
							margin-top: 6rpx;
						}
					}
				}
				.tit{
					// font-weight: 600;
					margin-bottom: 10rpx;
				}
				.address{
					color: #999;
					font-size: 22rpx;
				}
			}
			.price{
				color: #8615E1;
				font-weight: bold;
			}
		}
	}
}
.scroll_screen {
	height: 100vh;
	.uni-forms {
		padding: 0 20upx;
	}
	
	.uni-forms .uni-forms-item__label {
		padding-bottom: 0 !important;
	}
	
	.uni-forms .uni-forms-item {
		margin-bottom: 10px;
	}
	.data_time {
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		color: #333;
		font-size: 14px;
		height: 35px;
		line-height: 35px;
		padding: 0 10px;
	}
	.screen_submit {
		padding-top: 50upx;
		text-align: center;
		button {
			background: $bg-color;
			color: #fff;
			line-height: 90upx;
			height: 90upx;
			font-size: 34upx;
			letter-spacing: 1px;
		}
	}
}
	
</style>
